import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import { withRouter } from "react-router-dom"

class TabBarExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'index',
      hidden: false,
      fullScreen: true,
    };
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff3f78"
          barTintColor="white"
          hidden={this.state.hidden}
          style={{ fontSize: '18px' }}
        >
          <TabBar.Item
            title="首页"
            key="index"
            icon={<i className='iconfont icon-shouye' style={{ fontSize: '18px' }}></i>}
            selectedIcon={<i className='iconfont icon-shouye' style={{ fontSize: '18px' }}></i>}
            selected={this.props.location.pathname === '/'}

            onPress={() => this.props.history.push("/")}
          >
            {this.props.location.pathname === '/' && this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont icon-shangcheng2' style={{ fontSize: '18px' }} />}
            selectedIcon={<i className='iconfont icon-shangcheng2' style={{ fontSize: '18px' }} />}
            title="商城"
            key="shopping"
            selected={this.props.location.pathname === '/shopping'}
            onPress={() => this.props.history.push('/shopping')}
          >
            {this.props.location.pathname === '/shopping' && this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont icon-15' style={{ fontSize: '18px' }} />}
            selectedIcon={<i className='iconfont icon-15' style={{ fontSize: '18px' }} />}
            title="直播"
            key="live"
            selected={this.props.location.pathname === '/live'}
            onPress={() => this.props.history.push('/live')}
          >
            {this.props.location.pathname === '/live' && this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont icon-wode1' style={{ fontSize: '18px' }} />}
            selectedIcon={<i className='iconfont icon-wode1' style={{ fontSize: '18px' }} />}
            title="我"
            key="my"
            selected={this.props.location.pathname === '/my'}
            onPress={() => this.props.history.push('/my')}
          >
            {this.props.location.pathname === '/my' && this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(TabBarExample)